<template>
	<view class="i-porcelain" :style="[bodyStyle]">
		<view class="e-flex  porcelain-main">
			<view :style="[{
					backgroundImage: `url(${$fullLink(option.layoutList[0].imgUrl)})`,
					borderRadius: borderRadius
				}]" class="por_box1" :class="{ 'e-m-r-10': option.imgMargin == 1 }" @tap="jumpLink(option.layoutList[0].link)">
				<view class="e-font-26" :style="[{ color: option.layoutList[0].titleColor }]">
					{{ option.layoutList[0].title }}
				</view>
				<view class="e-font-24" :style="[{ color: option.layoutList[0].subTitleColor }]">
					{{ option.layoutList[0].subTitle }}
				</view>
			</view>
			<view class="e-flex e-flex-column" :class="{ 'e-m-r-10': option.imgMargin == 1 }">
				<view class="por_box2" :class="{ 'e-m-b-10': option.imgMargin == 1 }" :style="[{
						backgroundImage: `url(${$fullLink(option.layoutList[1].imgUrl)})`,
						borderRadius: borderRadius
					}]" @tap="jumpLink(option.layoutList[1].link)">
					<view class="e-font-26" :style="[{ color: option.layoutList[1].titleColor }]">
						{{ option.layoutList[1].title }}
					</view>
					<view class="e-font-24" :style="[{ color: option.layoutList[1].subTitleColor }]">
						{{ option.layoutList[1].subTitle }}
					</view>
				</view>
				<view class="por_box3" :style="[{
						backgroundImage: `url(${$fullLink(option.layoutList[2].imgUrl)})`,
						borderRadius: borderRadius
					}]" @tap="jumpLink(option.layoutList[2].link)">
					<view class="e-font-26" :style="[{ color: option.layoutList[2].titleColor }]">
						{{ option.layoutList[2].title }}
					</view>
					<view class="e-font-24" :style="[{ color: option.layoutList[2].subTitleColor }]">
						{{ option.layoutList[2].subTitle }}
					</view>
				</view>
			</view>
			<view class="e-flex e-flex-column">
				<view class="por_box4" :style="[{
						backgroundImage: `url(${$fullLink(option.layoutList[3].imgUrl)})`,
						borderRadius: borderRadius
					}]" :class="{ 'e-m-b-10': option.imgMargin == 1 }" @tap="jumpLink(option.layoutList[3].link)">
					<view class="e-font-26" :style="[{ color: option.layoutList[3].titleColor }]">
						{{ option.layoutList[3].title }}
					</view>
					<view class="e-font-24" :style="[{ color: option.layoutList[3].subTitleColor }]">
						{{ option.layoutList[3].subTitle }}
					</view>
				</view>
				<view class="por_box5" :style="[{
						backgroundImage: `url(${$fullLink(option.layoutList[4].imgUrl)})`,
						borderRadius: borderRadius
					}]" @tap="jumpLink(option.layoutList[4].link)">
					<view class="e-font-26" :style="[{ color: option.layoutList[4].titleColor }]">
						{{ option.layoutList[4].title }}
					</view>
					<view class="e-font-24" :style="[{ color: option.layoutList[4].subTitleColor }]">
						{{ option.layoutList[4].subTitle }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { computed } from 'vue'
	import { px2rpx } from './utils'
	import type { pageLink } from './type'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { useLayoutCompoments } from './hooks'

	type LayoutItem = {
		imgUrl : string
		title : string
		titleColor : string
		subTitle : string
		subTitleColor : string
		link : pageLink,
	}

	const props = withDefaults(defineProps<{
		option : {
			//样式风格
			styleType : 0 | 1 | 2
			backgroundColor : string
			// 图片是否有间距,有则固定5px边距
			imgMargin : 1 | 2
			// 边距
			paddingTop : number
			paddingBottom : number
			// 圆角
			radiusTop : number
			radiusBottom : number
			layoutList : LayoutItem[]
		}
	}>(), {
		option: () => ({
			styleType: 0,
			backgroundColor: '',
			imgMargin: 1,
			paddingTop: 10,
			paddingBottom: 10,
			radiusTop: 10,
			radiusBottom: 10,
			layoutList: []
		})
	})

	const ctx = useCurrentInstance()

	const { jumpLink } = useLayoutCompoments(ctx, props.option)

	const bodyStyle = computed(() => {
		return {
			paddingTop: `${props.option.paddingTop}px`,
			paddingBottom: `${props.option.paddingBottom}px`,
			backgroundColor: props.option.backgroundColor
		}
	})



	const borderRadius = computed(() => {
		return `${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusBottom)} ${px2rpx(
			props.option.radiusBottom
		)}`
	})
</script>
<style lang="scss" scoped>
	.porcelain-main {
		padding: 0 20rpx;

		.por_box1 {
			flex: 1;
			width: 280rpx;
			height: 480rpx;
			background-size: 100% 100%;
			padding: 5px;
		}

		.por_box2,
		.por_box3,
		.por_box4,
		.por_box5 {
			width: 202rpx;
			flex: 0 0 240rpx;
			background-size: 100% 100%;
			padding: 5px;
		}
	}
</style>